import { Component, OnInit, ElementRef, } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NzModalService } from 'ng-zorro-antd';

import { InquiryStatusComponent } from '../inquirystate/inquirystate.component';

@Component({
  selector: 'app-inquiryls',
  templateUrl: './inquiryls.component.html',
  styleUrls: ['./inquiryls.component.less'],
})
export class InquirylsComponent implements OnInit {

  controlArray: ControlArray[] = [
    {
      name: '股票代码',
      controlname: 'stockcode',
      placeholder: '请输入股票代码',
      type: 'input',
      show: true
    }, {
      name: '股票名称',
      controlname: 'stockname',
      placeholder: '请输入股票名称',
      type: 'input',
      show: true
    }, {
      name: '用户名称',
      controlname: 'username',
      placeholder: '请输入用户名称',
      type: 'input',
      show: true,
    }, {
      name: '用户帐号',
      controlname: 'useraccount',
      placeholder: '请输入用户帐号',
      type: 'input',
      show: true,
    }, {
      name: '合约周期',
      controlname: 'cycle',
      placeholder: '',
      type: 'select',
      show: false,
    }, {
      name: '状态',
      controlname: 'state',
      placeholder: '',
      type: 'select',
      show: false,
    }, {
      name: '询价时间起',
      controlname: 'starttime',
      placeholder: '请选择开始时间',
      type: 'date',
      show: false,
      show_ca: false,
    }, {
      name: '询价时间终',
      controlname: 'endtime',
      placeholder: '请选择结束时间',
      type: 'date',
      show: false,
      show_ca: false,
    }
  ];

  isCollapse = true;

  searchForm: FormGroup;

  dataSet = [{
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York Park',
  }];

  constructor(
    private fb: FormBuilder,
    private modalService: NzModalService,
  ) { }

  ngOnInit() {
    this.initSearchForm();
  }

  /**
   * 初始化表单
   */
  initSearchForm() {
    this.searchForm = this.fb.group({
      'stockcode': [],
      'stockname': [],
      'username': [],
      'useraccount': [],
      'cycle': [],
      'state': [],
      'starttime': [new Date(new Date().valueOf() - 1000 * 60 * 60 * 24 * 7)],
      'endtime': [new Date()]
    });
    document.body.addEventListener('click', () => {
      this.controlArray.forEach(element => {
        if (element.type == 'date') {
          element.show_ca = false;
        }
      });
    });
  }

  toggleCollapse(): void {
    this.isCollapse = !this.isCollapse;
    this.controlArray.forEach((c, index) => {
      c.show = this.isCollapse ? (index < 4) : true;
    });
  }

  show_ca(e: Event, ctrl) {
    e.cancelBubble = true;
    ctrl.show_ca = true;
  }

  inquiryStatus(status: boolean) {
    this.modalService.create({
      nzTitle: status ? '确认询价' : '拒绝询价',
      nzContent: InquiryStatusComponent,
      nzComponentParams: { status }
    });
  }

}

interface ControlArray {
  name: string,
  controlname: string,
  placeholder: string,
  type: string,
  show: boolean,
  show_ca?: boolean,
}
